<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script type="text/javascript">
        var bitmapWidth = 600;
        var bitmapHeight = 600;
        var ballRadius = 100;
        var ballPointX = 300;
        var ballPointY = 300;
        var ballRadiusSmall = 80;
        var timer = null;
        var maxAngle = 180;
        var minAngle = 90;
        var targetAngle = 0;
        var slideAngle = 0;
        var gameStatus = 0;

        var ballSmallRadius = (ballRadius - ballRadiusSmall) / 2;

        function getRingAngle() {
            // 圆心坐标
            var centerCircle = [ballPointX, ballPointY];
            var allAngle = [];
            var defaultBallRadius = ballRadius - ballSmallRadius;
            // 默认坐标, 0°
            // var defaultAngle = [ballPointX, (ballPointY - ballRadiusSmall - ballSmallRadius)];
            // allAngle.push(defaultAngle);
            var totalAngle = 360;
            for (var i = 0; i < totalAngle; i++) {
                var temp_x = parseInt(centerCircle[0] + defaultBallRadius * Math.cos(i * Math.PI / 180));
                var temp_y = parseInt(centerCircle[1] + defaultBallRadius * Math.sin(i * Math.PI / 180));
                var location = [temp_x, temp_y];
                allAngle.push(location);
            }
            return allAngle;
        }

        function createBall(context) {
            context.beginPath();
            context.arc(ballPointX, ballPointY, ballRadius, 0, 2 * Math.PI);
            context.fillStyle = "rgb(2,100,30)";
            context.closePath();
            context.fill();
            context.beginPath();
            context.arc(ballPointX, ballPointY, ballRadiusSmall, 0, 2 * Math.PI);
            context.fillStyle = "#fff";
            context.closePath();
            context.fill();
        }

        function createBallSmall(context, allAngle, angle) {
            var currentAngle = allAngle[angle];
            context.beginPath();
            context.arc(currentAngle[0], currentAngle[1], ballSmallRadius, 0, 2 * Math.PI, true);
            context.fillStyle = "red";
            context.closePath();
            context.fill();
        }

        function createSlide(context, allAngle, angle) {
            var currentAngle = allAngle[angle];
            context.beginPath();
            context.arc(currentAngle[0], currentAngle[1], ballSmallRadius, 0, 2 * Math.PI, true);
            context.fillStyle = "black";
            context.closePath();
            context.fill();
        }

        function getRandom(min, max) {
            var range = max - min;
            var rand = Math.random();
            var num = min + Math.floor(rand * range);
            return num;
        }

        function compare(number1, number2) {
            if (number1 > number2) {
                return [number1, number2]
            } else {
                return [number2, number1];
            }
        }

        function diff(angle1, angle2) {
            var angels = compare(angle1, angle2);
            return angels[0] - angels[1];
        }

        function clearAngle() {
            targetAngle = 0;
            slideAngle = 0;
            gameStatus = 0;
            if (timer != null) {
                clearInterval(timer);
                timer = null;
            }
        }

        function fail() {
            clearAngle();
            alert('fail');
        }

        function shaking(canvas) { }

        window.onload = function () {
            var canvasElem;
            var canvas = document.getElementsByTagName('canvas');
            if (canvas.length == 0) {
                canvasElem = document.createElement('canvas');
                canvasElem.width = bitmapWidth;
                canvasElem.height = bitmapHeight;
                canvasElem.style = 'border:1px blue solid;';
                document.body.appendChild(canvasElem);
            } else {
                canvasElem = canvas[0];
            }
            if (canvasElem.getContext) {
                context = canvasElem.getContext('2d');
                var allAngle = getRingAngle();

                function initialize() {
                    gameStatus = 1;
                    createBall(context);
                    if (targetAngle == 0) {
                        targetAngle = getRandom(maxAngle, allAngle.length - 1);
                    }
                    // console.log('targetAngle=' + targetAngle)
                    createBallSmall(context, allAngle, targetAngle);
                    if (slideAngle == 0) {
                        while (true) {
                            slideAngle = getRandom(0, targetAngle);
                            var angles = compare(slideAngle, targetAngle);
                            var diffNumber = angles[0] - angles[1];
                            if ((diffNumber > minAngle) &&
                                (diffNumber < maxAngle)) {
                                break;
                            }
                        }
                        createSlide(context, slideAngle);
                    }
                }
                timer = setInterval(function () {
                    context.clearRect(0, 0, bitmapWidth, bitmapHeight);
                    initialize();
                    slideAngle += 2;
                    // console.log('slideAngle=' + slideAngle)
                    if ((slideAngle - targetAngle) >= ballSmallRadius) {
                        fail();
                        gameStatus = 0;
                        return false;
                    }
                    createSlide(context, allAngle, slideAngle);
                    context.stroke();
                }, 20);

            } else {
                throw '浏览器不支持canvas绘图!';
            }

            document.getElementsByTagName('body')[0].onclick = function () {
                if (gameStatus == 0) {
                    window.onload()
                } else {
                    var targetAngles = compare(slideAngle, targetAngle);
                    clearAngle();
                    if ((targetAngles[0] - targetAngles[1]) < ballSmallRadius) {
                        alert('success');
                        return false;
                    } else {
                        shaking(document.getElementsByTagName('canvas')[0])
                        alert('fail');
                    }

                }
            }
        }
    </script>
</head>

<body>

</body>

</html>